<template>
    <div id="modifyPassword">
        <!-- 密码修改 -->
        <div class="modifyPassword" v-if="modifyPasswordShow">
            <div class="title">密码修改</div>
            <div class="content">
                <div id="information" class="primaryPassword">
                    <div class="left">原密码：</div>
                    <el-input v-model="primaryInput" placeholder="请输入原密码" class="right"></el-input>
                    <div class="forgetPassword" @click="forgetPassword">忘记密码？</div>
                </div>
                <div id="information">
                    <div class="left">新密码：</div>
                    <el-input v-model="newInput" placeholder="请输入新密码" class="right"></el-input>
                </div>
                <div id="information">
                    <div class="left">确认新密码：</div>
                    <el-input v-model="confirmInput" placeholder="请再次确认新密码" class="right"></el-input>
                </div>
                <div class="button">确认修改</div>
            </div>
        </div>
        <!-- 手机号验证 -->
        <div class="phoneVerification" v-if="phoneVerificationShow">
            <div class="title">手机号验证</div>
            <div class="content">
                <div id="information" class="phone">
                    <div class="left">手机号：</div>
                    <el-input v-model="phoneInput" placeholder="请输入手机号" style="width: 70%;"></el-input>
                </div>
                <div id="information">
                    <div class="left">验证：</div>
                    <el-input v-model="phoneVerifyInput" placeholder="请输入验证码"></el-input>
                    <div class="right">{{phoneVerifyNewCode}}</div>
                </div>
                <div id="information">
                    <div class="left">验证码：</div>
                    <el-input v-model="verifyInput" placeholder="请输入短信验证码"></el-input>
                    <div class="rightButton" v-if="phoneTimeShow" @click="sendCode">发送验证码</div>
                    <div class="anewRightButton" v-if="!phoneTimeShow" @click="sendCode">重新发送（{{phoneTime}}）</div>
                </div>
                <div class="button" @click="setNewPassword">设置新密码</div>
            </div>
        </div>
        <!-- 设置新密码 -->
        <div class="modifyPassword" v-if="setNewPasswordShow">
            <div class="title">设置新密码</div>
            <div class="content">
                <div id="information">
                    <div class="left">新密码：</div>
                    <el-input v-model="setNewPasswordInput" placeholder="请输入新密码" class="right"></el-input>
                </div>
                <div id="information">
                    <div class="left">确认新密码：</div>
                    <el-input v-model="confirmSetNewPasswordInput" placeholder="请再次确认新密码" class="right"></el-input>
                </div>
                <div class="button" @click="login">立即登录</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            modifyPasswordShow: true, // 密码修改的显示隐藏
            primaryInput: "", // 原密码输入值
            newInput: "", // 新密码输入值
            confirmInput: "", // 确认新密码输入值
            phoneVerificationShow: false, // 手机号验证的显示隐藏
            phoneInput: "", // 手机号输入值
            phoneVerifyInput: "", // 验证输入值
            phoneVerifyNewCode: "0813", // 验证
            verifyInput: "", // 验证码输入值
            phoneTime: 60,
            phoneTimeShow: true, // 控制验证码的显示隐藏
            setNewPasswordShow: false, // 确认密码的显示隐藏
            setNewPasswordInput: "", // 设置新密码中新密码输入值
            confirmSetNewPasswordInput: "", // 设置新密码中确认密码输入值
        };
	},
    mounted(){},
	methods: {
		// 点击显示忘记密码页面
		forgetPassword(){
            // console.log("显示忘记密码页面")
			this.modifyPasswordShow = false
			this.phoneVerificationShow = true
		},
        // 手机号点击发送验证码
        sendCode(){
			// console.log("手机号发送验证码")
            this.phoneTimeShow = false
            this.timer = setInterval(()=>{
                this.phoneTime--
                if(this.phoneTime === 0){
                    this.phoneTimeShow = true
                    clearInterval(this.timer)
                }
            },1000)
		},
		// 点击显示设置新密码页面
		setNewPassword(){
            // console.log("显示忘记密码页面")
			this.phoneVerificationShow = false
			this.setNewPasswordShow = true
		},
        // 点击跳转到登录页面
		login(){
			this.$router.push("/logIn")
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #modifyPassword{
        padding: 3% 5%;
        font-size: 16px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 24px;
            border-bottom: 1px solid #ddd;
        }
        // 密码修改
        .modifyPassword{
            .content{
                margin-top: 7%;
                #information{
                    width: 60%;
                    margin-top: 3%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 30%;
                        text-align: right;
                    }
                    .right{
                        width: 50%;
                    }
                }
                // 原密码
                .primaryPassword{
                    .forgetPassword{
                        font-size: 12px;
                        color: #F39E2A;
                        margin-left: 5%;
                    }
                }
            }
        }
        // 手机号验证
        .phoneVerification{
            .content{
                margin-top: 7%;
                #information{
                    width: 60%;
                    margin-top: 3%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 20%;
                        text-align: right;
                    }
                    .el-input{
                        width: 35%;
                        margin-right: 2%;
                    }
                    .right{
                        width: 33%;
                        line-height: 4px;
                        text-align: center;
                        border: 2px solid #eee;
                    }
                    .rightButton{
                        width: 33%;
                        line-height: 40px;
                        text-align: center;
                        color: white;
                        background: #F39E2A;
                    }
                    .anewRightButton{
                        width: 33%;
                        line-height: 4px;
                        text-align: center;
                        color: white;
                        background: url("../../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                // 手机号
                .phone{
                    width: 60%;
                    margin-top: 3%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 30%;
                        text-align: right;
                    }
                }
            }
        }
        // 确认修改，设置新密码，立即登录
        .button{
            width: 20%;
            margin: 10% 0% 0% 40%;
            text-align: center;
            border-radius: 5px;
            padding: 1% 0%;
            font-size: 16px;
            color: white;
            background: #F39E2A;
        }
    }
}



@media screen and (max-width: 1400px){    
    #modifyPassword{
        padding: 2% 4%;
        font-size: 14px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 22px;
            border-bottom: 1px solid #ddd;
        }
        // 密码修改
        .modifyPassword{
            .content{
                margin-top: 6%;
                #information{
                    width: 60%;
                    margin-top: 2%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 30%;
                        text-align: right;
                    }
                    .right{
                        width: 50%;
                    }
                }
                // 原密码
                .primaryPassword{
                    .forgetPassword{
                        font-size: 10px;
                        color: #F39E2A;
                        margin-left: 5%;
                    }
                }
            }
        }
        // 手机号验证
        .phoneVerification{
            .content{
                margin-top: 6%;
                #information{
                    width: 60%;
                    margin-top: 2%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 20%;
                        text-align: right;
                    }
                    .el-input{
                        width: 35%;
                        margin-right: 2%;
                    }
                    .right{
                        width: 33%;
                        line-height: 4px;
                        text-align: center;
                        border: 2px solid #eee;
                    }
                    .rightButton{
                        width: 33%;
                        line-height: 40px;
                        text-align: center;
                        color: white;
                        background: #F39E2A;
                    }
                    .anewRightButton{
                        width: 33%;
                        line-height: 40px;
                        text-align: center;
                        color: white;
                        background: url("../../image/weixuanzhong.png") no-repeat 100%;
                    }
                }
                // 手机号
                .phone{
                    width: 60%;
                    margin-top: 3%;
                    margin-left: 20%;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    .left{
                        width: 30%;
                        text-align: right;
                    }
                }
            }
        }
        // 确认修改，设置新密码，立即登录
        .button{
            width: 20%;
            margin: 8% 0% 0% 40%;
            text-align: center;
            border-radius: 5px;
            padding: 1% 0%;
            font-size: 14px;
            color: white;
            background: #F39E2A;
        }
    }
}
</style>